<template>
	<div>
		<!--首页内容页-->
		<com-content :hasHeader="false">
			<div class="home-headerAndSearch">
				<!--首页头部-->
				<home-header ref="homeHeader"></home-header>
				<!--首页搜索框-->
				<home-search></home-search>
			</div>
			<!--轮播图1-->
			<com-swiper>
				<swiperItem v-for="list in lists">
					<div class="swiper-item" v-for="item in list">
						<img :src="item.img" />
						<span class="swiper-span">{{item.name}}</span>
					</div>
				</swiperItem>
			</com-swiper>
			<!--轮播图2-->
			<com-swiper class="a">
				<swiperItem v-for="item in banner">
					<img :src="item" />
				</swiperItem>
			</com-swiper>
			<div class="list"></div>
		</com-content>
		<!--悬停搜索框-->
		<home-search v-show="showSearch" :positionTopZero="true"></home-search>
	</div>
</template>

<script>
	import homeHeader from "./home-header.vue"
	import Search from "./Search.vue"
	
	import API from "../../api"
	
	import { getEentries } from "../../services/home/homeService.js"
	import { handImgPath } from "../../utils/commonFn.js"
	
	export default {
		data(){
			return {
				title: "首页",
				showSearch: false,
				lists: [],
				banner: []
			}
		},
		created(){
			getEentries(32.055015,118.77943,["main_template","favourable_template","svip_template"])
			.then((data)=>{
				this.lists = data;
			})
			.catch((error)=>{
				console.log(error)
			})
			this.banner = [handImgPath(API.BANNER_IMG_ONE,375,88),handImgPath(API.BANNER_IMG_TWO,375,88)]
		},
		mounted(){
			//获取homeHeader子组件dom结构的高
			let homeHeaderHeight = this.$refs.homeHeader.$el.offsetHeight;
			
			//在设备旋转的时候
			window.addEventListener("orientationchange",()=>{
				homeHeaderHeight = this.$refs.homeHeader.$el.offsetHeight;
			});
			//size字体变化的时候
			window.addEventListener("resize",()=>{
				homeHeaderHeight = this.$refs.homeHeader.$el.offsetHeight;
			});
			
			this.center.$on("show-search",(_position)=>{
				if(_position<-homeHeaderHeight){
					this.showSearch = true;
				}else{
					this.showSearch = false;
				}
			})
			
		},
		updated(){
			let mySwiper = new Swiper('.swiper-container', {
				pagination: {
			    	el: '.swiper-pagination',
			   	},
				loop: true,
				autoplay: {
			    delay: 1500,
			    stopOnLastSlide: false,
			    disableOnInteraction: true,
			   }
		    });
		},
		components:{
			[homeHeader.name]: homeHeader,
			[Search.name]: Search
		}
	}
</script>

<style>
	.home-headerAndSearch{
		background: linear-gradient(90deg,#0af,#0085ff);
	}
	.list{
		height: 1000px;
	}
	.swiper-span{
		display: block;
		font-size: 14px;
	}
	.swiper-item{
		width: 33.33%;
		float: left;
	}
	.swiper-container{
	    height: 36vw;
	}
	.a{
	    height: 88px;
	}
</style>